<template>
	<view class="device-detail" v-if="deviceDetail">
		<g-navbar title="机具详情" />
		<view class="main">
			<view class="device-info-container">
				<view class="device-info-top-wrapper">
					<view class="device-name">
						{{deviceDetail.machine_name}}
					</view>
					<view class="device-status"
						:style="{'borderColor':global.deviceActivateStatusList[deviceDetail.activate_type].color,'color':global.deviceActivateStatusList[deviceDetail.activate_type].color}">
						<g-auto-zoom-text>{{global.deviceActivateStatusList[deviceDetail.activate_type].name}}</g-auto-zoom-text>
					</view>
				</view>
				<view class="device-info-item">
					设备编号：{{deviceDetail.model_sn}} <i class="iconfont icon-copy" @click="copy" />
				</view>
				<view class="device-info-item">
					所属代理：{{deviceDetail.agent_info}}
				</view>
			</view>
			<view class="device-amount-container">
				<view class="amount-item">
					<view class="amont-value">
						<g-auto-zoom-text><view class="unit">￥</view>{{deviceDetail.month_trade}}</g-auto-zoom-text>
					</view>
					<view class="amount-label">
						本月交易量(元)
					</view>
				</view>
				<view class="amount-item">
					<view class="amont-value">
						<g-auto-zoom-text><view class="unit">￥</view>{{deviceDetail.total_trade?deviceDetail.total_trade:'0.00'}}</g-auto-zoom-text>
					</view>
					<view class="amount-label">
						累计交易量(元)
					</view>
				</view>
			</view>
			<view class="device-detail-container">
				<view class="title">
					机具详情
				</view>
				<view class="detail-item" v-for="item,index in deviceDetailOptionsList" :key="index">
					<text class="label">
						{{item.label}}：
					</text>
					<template v-if="index==0">
						<text class="value"
							:style="{'color':global.deviceActivateStatusList[deviceDetail.activate_type].color}">
							{{item.value}}
						</text>
					</template>
					<template v-else>
						<text class="value">
							{{item.value}}
						</text>
					</template>
				</view>
			</view>
			<view class="device-statistical-chart-container">
				<view class="title">
					交易金额趋势图
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="amountChartsOpts" :chartData="chartData" />
				</view>
			</view>

			<view class="device-statistical-chart-container">
				<view class="title">
					交易量趋势图
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :chartData="countchartData" />
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { IDeviceDetailOptions, IGetDeviceDetailOptions, IDeviceDetail, IDateItem } from './types';
	import { reactive, ref, Ref, computed, ComputedRef } from 'vue';
	import global from '@/global';
	import { ACTIVATE_STATUS } from '@/enum/device';
	import { useStore } from 'vuex';
	import { onLoad } from '@dcloudio/uni-app';
	import REST_URL from '@/http/http.restUrl';
	import dayjs from 'dayjs';
	import { GET_STORE_USERINFO } from '@/store/gettersType';


	const store = useStore();

	const model_sn : Ref<string> = ref('');

	const deviceDetail : Ref<IDeviceDetail | null> = ref(null);
	


	const deviceDetailOptionsList : ComputedRef<IDeviceDetailOptions[]> = computed(() => {
		if (!deviceDetail.value) return []
		return [
			{
				label: '激活状态',
				value: global.deviceActivateStatusList[deviceDetail.value.activate_type].name,
				isShow: true,
			},
			{
				label: '90天内交易量',
				value: '￥' + deviceDetail.value.assess_time_amount,
				isShow: true,
			},
			{
				label: '分润比率',
				value: `每万元/奖励${deviceDetail.value.earnings_ratio}元`,
				isShow: true,
			},
			{
				label: '激活奖励',
				value: '￥' + deviceDetail.value.earnings_amount,
				isShow: true,
			},
			// {
			// 	label: '终端开启状态',
			// 	value:deviceDetail.value.,
			// 	isShow: true,
			// },
			{
				label: '机器单价',
				value: '￥' + deviceDetail.value.retail_price,
				isShow: true,
			},
			{
				label: '考核金额',
				value: '￥' + deviceDetail.value.activate_amount,
				isShow: store.state.userInfo && store.state.userInfo.direct,
			},
			{
				label: '交易量考核天数',
				value: deviceDetail.value.assess_time,
				isShow: store.state.userInfo && store.state.userInfo.direct,
			},
			{
				label: '激活时间',
				value: deviceDetail.value.open_time,
				isShow: true,
			}
		]
	})

	const baseOpts = {
		dataLabel: false,
		dataPointShape: false,
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
			data: [
				{
					min: 0,
				}
			]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			}
		}
	}



	const amountChartsOpts = {
		...baseOpts,
		color: ["#67CE7F"],
	}


	const countChartsOpts = {
		...baseOpts,
		color: ["#67CE7F"],
	}



	onLoad(async (e) => {
		await uni.loginManger.$interceptor;
		model_sn.value = e.model_sn;
		await getDeviceDetail();
	})


	const chartsDateList : ComputedRef<string[]> = computed(() => {
		let temp : string[] = [];
		if (!deviceDetail.value) return temp;
		for (let key in deviceDetail.value.month_trade_statistics) {
			temp.unshift(deviceDetail.value.month_trade_statistics[key].date);
		}
		return temp
	})

	const chartsAmountList : ComputedRef<number[]> = computed(() => {
		let temp : number[] = [];
		if (!deviceDetail.value) return temp;
		for (let key in deviceDetail.value.month_trade_statistics) {
			temp.unshift(deviceDetail.value.month_trade_statistics[key].amount);
		}
		return temp
	})

	const chartsCountList : ComputedRef<number[]> = computed(() => {
		let temp : number[] = [];
		if (!deviceDetail.value) return temp;
		for (let key in deviceDetail.value.month_trade_statistics) {
			temp.unshift(deviceDetail.value.month_trade_statistics[key].count);
		}
		return temp
	})


	const chartData = reactive({
		categories: chartsDateList.value,
		series: [
			{
				name: "交易金额",
				linearColor: [
					[
						1,
						"#67CE7F"
					],
				],
				setShadow: [
					5,
					25,
					50,
					"#67CE7F"
				],
				data: chartsAmountList.value
			}
		]
	})

	const countchartData = reactive({
		categories: chartsDateList.value,
		series: [
			{
				name: '交易量',
				data: chartsCountList.value
			}
		]
	})

	const resetCharts = () => {
		chartData.categories = chartsDateList.value;
		chartData.series[0].data = chartsAmountList.value;
		countchartData.categories = chartsDateList.value;
		countchartData.series[0].data = chartsCountList.value;
	}





	const statisticsListInit = (dateList : { [propname : string] : IDateItem } = {}) : void => {
		for (let i = 0; i < 6; i++) {
			const dateStr : string = dayjs().subtract(i, 'month').startOf(i === 6 - 1 ? 'month' : 'second').format('YYYY-MM');
			const temp : IDateItem = {
				date: dayjs(dateStr).format('YY-MM'),
				amount: dateList[dateStr] ? dateList[dateStr].amount : 0,
				count: dateList[dateStr] ? dateList[dateStr].count : 0,
			}
			deviceDetail.value!.month_trade_statistics![dateStr] = temp;
		}
	}



	const getDeviceDetail = async () : Promise<void> => {
		const options : IGetDeviceDetailOptions = {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			model_sn: model_sn.value,
			start_month: dayjs().subtract(5, 'month').startOf('month').format('YYYY-MM-DD'),
			end_month: dayjs().subtract(0, 'month').format('YYYY-MM-DD'),
		}
		const result : IDeviceDetail = (await uni.http.POST(REST_URL.deviceDetail, options)).data;
		deviceDetail.value = result;
		deviceDetail.value.month_trade_statistics = result.month_trade_statistics ? result.month_trade_statistics : {};
		statisticsListInit(deviceDetail.value.month_trade_statistics);
		console.log(deviceDetail.value)
		resetCharts();
	}


	const copy = () => {
		uni.setClipboardData({
			data: deviceDetail.value!.model_sn,
			success: () => {
				uni.prompt.$showToast('已复制机具编号')
			}
		});
	}
</script>

<style scoped lang="scss">
	@import "./deviceDetail.scss";
</style>